/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="back" style="margin-top: 60upx;">
			<image src="@/static/zuo.png" mode=""
				style="width: 50upx;height: 50upx;padding-left: 15upx;padding-top: 10upx;" @click="backk"></image>
		</view>
		<form @submit="formSubmit" class="form">
			<view class="formContent">
				<!-- <view class="backBtn" @click="getback">
					<image :src="delSrc" mode="scaleToFill"></image>
				</view> -->
				<view class="header">
					<!-- <u-image class="logoSrc" :src="logoSrc" width="250" height="120" border-radius="15"></u-image> -->
					<h2 class="mainTit">欢迎登录车队长</h2>
					<!-- <h3 class="subTit">专注于电商直播产品研发与定制</h3> -->
				</view>
				<view class="formItem">
					<view class="area">+86</view>
					<input type="number" class="input phone" name="phone" placeholder="请输入手机号" v-model="phone">
				</view>
				<view class="formItem">
					<input type="text" class="input" name="code" placeholder="请输入验证码" v-model="code">
					<view class="sendCode btn-color" v-if="showTime">{{time}}s后重新获取</view>
					<view class="sendCode btn-color" @click="getCode()" hover-class="text-hover" v-else>获取验证码</view>
				</view>
				<view class="formItem">
					<input type="password" class="input" name="pwd" placeholder="请输入密码4-16位密码" v-model="password">
				</view>
				<view class="formButton">
					<button formType="submit" class="button" hover-class="text-hover">立即注册</button>
				</view>
				<view class="agreement" @click="changeAgree()">
					<image src="../../static/images/select_active.png" v-if="isSelected"></image>
					<image src="../../static/images/select.png" v-else></image>
					点击按钮表示同意<text @click.stop="navigateToArticle('隐私政策')" style="color: #EC4849;"> 《隐私协议》 </text>
					<text @click.stop="navigateToArticle('用户协议')" style="color: #EC4849;"> 《用户协议》 </text>
				</view>
			</view>

		</form>
		<xiaokeai-humanCheck   :show="isfalse"    @checkResult="checkResultHandle"  ></xiaokeai-humanCheck>

		<!-- 第三方登录 微信 -->
<!-- 		<view class="other-login" v-show="isWechatShow">
			<p class="title"> --------- 快捷注册 --------- </p>
			<view class="wrap">
				<view v-for="(icon,index) in icons" :key="index" class="item" @click="wxLogin">
					<image class="icon-otherLogin" :src="icon.wechatSrc" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import graceChecker from "../../api/graceChecker.js"

	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				password: '', //密码
				isfalse:false,
				isSelected: false, //是否同意协议
				timer: null, //定时器
				isClick: true, //避免用户重复点击
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				parmas: null, //绑定手机号需要的参数
				providerList: [],
				isWechatShow: false,
				icons: [{
					wechatSrc: '',
				}],
				logoSrc: this.STATICURL + 'images/logo/dsx_logo.png',
				delSrc: ''
			}
		},
		onLoad(option) {
			this.getCid();
			this.getThirdLogin();
			uni.getProvider({
				service: 'oauth',
				success: (e) => {
					// console.log('oauth..........');
					this.providerList = e.provider.map((value) => {
						let providerName = '';
						switch (value) {
							case 'weixin':
								providerName = '微信登录'
								break;
							case 'qq':
								providerName = 'QQ登录'
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录'
								break;
							case 'xiaomi':
								providerName = '小米登录'
								break;
							case 'baidu':
								providerName = '百度登录'
								break;
							case 'alipay':
								providerName = '支付宝登录'
								break;
						}
						return {
							name: providerName,
							id: value
						}
					})
				},
				fail: (e) => {
					console.log("获取登录通道失败", e);
				}
			});
		},
		methods: {
			backk() {
				console.log(123)
				uni.navigateBack({
					delta:1
				})
			},
			checkResultHandle(e){
				console.log(e)
				if(e.detail == 'success'){
					this.isfalse = false
					if (this.isClick) {
						if (this.phone.length != 11) {
							return this.$toast('手机格式不正确')
						}
						this.$loading()
						this.$http.getsendcode({
							phone: this.phone
						}).then((res) => {
							if (res.status == 200) {
								this.showTime = true;
								// this.$toast(res.mess)
								uni.showToast({
									title: res.mess
								})
								this.timer = setInterval(() => {
									this.isClick = false;
									this.time = this.time - 1;
									if (this.time <= 0) {
										this.isClick = true;
										this.time = 60;
										this.showTime = false;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.mess,
									icon: 'none'
								})
							}
					
						})
					}
				}
			},
			navigateToArticle(url) {
				if(url == "隐私政策"){
					uni.navigateTo({
						url: `/pagesB/article/detail?tilte=${url}&id=${31}`
					});
				}else{
					uni.navigateTo({
						url: `/pagesB/article/detail?tilte=${url}&id=${42}`
					});
				}
				
			},
			getback() {
				uni.navigateTo({
					url: '/pagesB/login/login'
				});
			},
			getCid() {
				// #ifdef APP-PLUS
				//从缓存中取cid值，如果取到就不调取接口获取
				var t1 = setInterval(() => {
					var info = plus.push.getClientInfo();
					console.log(JSON.stringify(info))
					var cid = info.clientid;
					console.log(cid);
					var token = info.token;
					console.log(token);

					if (cid && token) {
						uni.setStorageSync("devicetoken", cid);
						console.log("存储成功");
						console.log(`devicetoken:${uni.getStorageSync("devicetoken")}`);
						this.devicetoken = uni.getStorageSync("devicetoken");
						clearInterval(t1);
					}
				}, 2000)
				// #endif
			},
			formSubmit(e) {
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						checkRule: "11",
						errorMsg: "手机格式不正确"
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入验证码"
					},
					{
						name: "pwd",
						checkType: "string",
						checkRule: "4,16",
						errorMsg: "输入4-16位密码"
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					console.log(this.isSelected == false, "this.isSelectedthis.isSelectedthis.isSelected")
					if (this.isSelected == false) {
						uni.showToast({
							title: '请先勾选用户协议',
							icon: 'none'
						})
					} else {
						this.$loading()
						this.$http.getzhuce({
							phone: this.phone,
							password: this.password,
							phonecode: this.code,
							repwd: this.password,
							xieyi: 1,
						}).then((res) => {
							if (res.status == 200) {
								uni.showToast({
									title: res.mess,
									icon: 'none'
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pagesB/login/login'
									})
								}, 1500);
							}else{
								uni.showToast({
									title: res.mess,
									icon: 'none'
								})
							}
						}).catch((err) => {
							console.log(err);
						})
					}



				} else {
					this.$toast(graceChecker.error)
				}
			},
			// 判断是否开启第三方登录
			getThirdLogin() {
				this.$http.getThirdLogin().then((res) => {
					if (res.status == 200) {
						this.isWechatShow = res.data.open
					}
				})
			},
			// 获取验证码
			getCode() {
				
				this.isfalse = true
			},

			// 第三方注册 微信
			wxLogin() {
				console.log("aaaaa")
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res, "看下")
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								// console.log('用户昵称为：' + infoRes.userInfo.nickName);
								console.log(JSON.stringify(infoRes))
								this.$loading()
								this.$http.getsfdenglu({
									oauth: 'weixin',
									openid: infoRes.userInfo.openId,
									nick_name: infoRes.userInfo.nickName,
									iconurl: infoRes.userInfo.avatarUrl,
									uniongender: infoRes.userInfo.gender
								}).then(result => {
									if (result.status == 200) {
										this.$toast(result.mess)
										uni.setStorageSync('token', result.data.token);
										setTimeout(() => {

											webSocket.connectSocket({
												success: () => {
													console.log('连接成功')
												}
											})
											uni.switchTab({
												url: '/pages/tabBar/Home'
											})
										}, 1000);
									} else {
										console.log(JSON.stringify(result))
									}
								}).catch(err => {
									console.log(JSON.stringify(err))
								})

							}
						});


					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			},
			// 是否同意协议
			changeAgree() {
				this.isSelected = !this.isSelected;
			},
			// 跳转
			goTo(path) {
				this.$navigateTo(path);
			}
		},
		// 页面卸载
		onUnload() {
			this.isClick = true;
			this.time = 60;
			// 清空定时器
			clearInterval(this.timer);
			this.timer = null;
		},

	}
</script>
<style lang="scss" scoped>
	page {
		background: #ffffff;
		position: relative
	}

	.page {

		.form {
			width: 100%;

			.formContent {
				padding-top: 100upx;
				padding-left: 70upx;
				padding-right: 70upx;

				.backBtn {
					position: absolute;
					right: 70upx;

					image {
						width: 54upx;
						height: 54upx;

					}
				}

				.header {
					text-align: left;
					margin-bottom: 34upx;
					margin-top: 100upx;

					.logoSrc {
						width: 110upx;
						height: 110upx;
						border-radius: 200px;
						position: relative;
						
					}

					.mainTit {
						font-size: 56upx;
						color: #333333;
						margin: 20upx 0;
					}

					.subTit {
						font-size: 28upx;
						color: #666;
						font-weight: 200;
					}
				}

				.formItem {
					height: 104upx;
					border-bottom: 1px solid rgba(238, 238, 238, 1);
					display: flex;
					align-items: center;

					.area {
						font-size: 30upx;
						color: #333;
						padding-right: 34upx;
						line-height: 1;
						border-right: 1upx solid #9B9B9B;
					}

					.sendCode {
						background-color: transparent;
						color: #EC4849;
					}

					input {
						flex: 1;
						font-size: 30upx;
						font-weight: 400;

						&.phone {
							padding-left: 33upx;
						}

						&::-webkit-input-placeholder {
							color: rgba(204, 204, 204, 1);
						}
					}
				}

				.formButton {
					margin-top: 60upx;
					position: relative;
					margin-bottom: 30upx;

					button {
						height: 80upx;
						line-height: 80upx
					}
				}

				.agreement {
					font-size: 28upx;
					color: #999;
					margin-top: 36upx;
					padding-left: 8upx;
					padding-bottom: 20upx;
					display: flex;
					align-items: center;

					image {
						margin-right: 4upx;
						width: 25upx;
						height: 25upx;
					}

				}
			}

		}

		.other-login {
			margin-top: 70upx;
			text-align: center;

			.title {
				color: #999999;
			}

			.wrap {
				display: flex;
				justify-content: center;
				margin-top: 30upx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-otherLogin {
						width: 55upx;
						height: 27upx;
					}
				}
			}
		}
	}
</style>
